<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url("../img/gb.jpg");
        }

        #login_div{
            display: flex;position: absolute;top: 0;bottom: 0;left: 0;right: 0;justify-content: center;align-items: center;
        }

        .login{
            width:700px;
            height:400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:rgba(17,15,16,0.1);
            box-shadow:10px 10px 20px rgba(17,15,16,0.8);
            border-radius:15px;
        }
    </style>
</head>
<body>
<div id="login_div">
    <div class="login" v-loading="loading"  element-loading-text="正在登录..."
         element-loading-spinner="el-icon-loading">
         <el-form ref="form" :model="userForm" label-width="80px" :rules="rules">
        <!--用户名-->
        <el-form-item label="用户名" style="width:400px;" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入用户名..." prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>

        <el-form-item label="密码" style="width:400px" prop="password">
            <el-input type="password" v-model="userForm.password" placeholder="请输入密码..." autocomplete="off" prefix-icon="el-icon-unlock"></el-input>
        </el-form-item>

             <br>
             <br>

        <el-form-item style="width:400px;">

            <el-button type="primary" @click="onSubmit('form')">立即登录</el-button>
            <el-button @click="onRest('form')">重置信息</el-button>
        </el-form-item>
    </el-form>
    </div>
</div>

</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'#login_div',
        data(){
            return{
                //表单验证规则
                rules:{
                    username:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2, message: '请输入不少于2个字符', trigger: 'blur' }
                    ],//验证用户名
                    password:[{ required: true, message: '请输入用户密码', trigger: 'blur' }]//验证用户名
                },
                userForm:{
                    username:'',
                    password:''
                },
                loading:false
            }
        },
        methods:{
            //点击登录
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        this.loading=true;
                        // alert("成功提交")
                        axios({
                            method:'post',
                            url:'http://localhost/user/login',
                            data:this.userForm
                        }).then(resp => {
                            if(resp.data == '-1'){
                                this.loading=false;
                                this.$message.error("用户名不存在");
                                return;
                            }

                            if(resp.data == '-2'){
                                this.loading=false;
                                this.$message.error("密码错误");
                                return;
                            }
                           // console.log(resp.data)
                            localStorage.setItem("loginUser",resp.data.username);
                            location.href="http://localhost/pages/books.html"

                        });
                    }else{
                        alert("请填写信息");
                        return false;
                    }
                })
            },
            //点击重置
            onRest(form){
                this.$refs[form].resetFields();
            }
        }
    });
</script>

</html>